<template>
  <div class="subject-grade pad">
    <el-page-header class="page-header" @back="goBack" :content="title">
    </el-page-header>
    <div class="head">
      <span>体能成绩</span>
    </div>
    <div v-if="subjects.length">
      <el-date-picker
        v-model="dateArea"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd"
        @input="clearSearch"
        clearable
        :picker-options="pickerOptions">
      </el-date-picker>
      <el-button type="primary" @click="handleSearch">
        <i class="el-icon-search"></i>
        搜索
      </el-button>
    </div>
    <div class="tab-head m-t-b">
      <div
        v-for="(item, index) in subjects"
        :key="item.examItemId"
        :class="tabIndex == index ? 'active' : ''"
        @click="changeTabIndex(index)"
      >{{item.examItemNam}}</div>
    </div>
    <el-table :data="gradeList" border stripe v-loading="loading">
      <el-table-column label="昵称" prop="nickname"></el-table-column>
      <el-table-column label="年龄" prop="barthday"></el-table-column>
      <el-table-column label="头像">
        <template slot-scope="scope">
          <img
            style="width: 50px; height: 50px;"
            v-if="scope.row.avatarUrl"
            :src="scope.row.avatarUrl"
            @click="lookBigImg(scope.row.avatarUrl)"
          />
          <span v-else>无</span>
        </template>
      </el-table-column>
      <el-table-column label="成绩" prop="achievement"></el-table-column>
      <el-table-column label="分数">
        <template slot-scope="scope">
          {{scope.row.score || '无'}}
        </template>
      </el-table-column>
      <el-table-column label="等级">
        <template slot-scope="scope">
          <span
            :class="['grade-status', 'normal', statusClass[scope.row.level].className]"
          >
            {{statusClass[scope.row.level].label}}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="录入时间" prop="createDate"></el-table-column>
    </el-table>

    <el-dialog title="查看大图" :visible.sync="showBigDialog">
      <div style="text-align: center;">
        <img :src="previewUrl" />
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  getMemberSubject,
  getSubjectGrade
} from '../api/version2';
import { formatDate } from '../util';
export default {
  name: 'SubjectGrade',
  props: ['id', 'name'],
  data () {
    return {
      title: '',
      showBigDialog: false,

      loading: true,
      subjects: [],
      dateArea: '',
      tabIndex: 0,
      gradeList: [],
      previewUrl: '',
      statusClass: { // 成绩等级
        1: { // 优秀
          label: '优秀',
          className: 'excellent'
        },
        2: { // 良好
          label: '良好',
          className: 'well'
        },
        3: { // 及格
          label: '及格',
          className: 'pass'
        },
        4: { // 不及格
          label: '不及格',
          className: 'fail'
        }
      },
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
    }
  },
  methods: {
    goBack () {
      history.back()
    },
    handleSearch () { // 搜索
      if (!this.dateArea) {
        return this.$message.error('搜索内容不能为空')
      };
      this.fetchGradeList()
    },
    lookBigImg (url) { // 查看大图
      this.previewUrl = url;
      this.showBigDialog = true
    },
    clearSearch () { // 清除搜索
      if (!this.dateArea) {
        this.fetchGradeList()
      }
    },
    changeTabIndex (index) { // 切换索引
      if (index === this.tabIndex) return;
      this.tabIndex = index;
      this.fetchGradeList()
    },
    fetchSubjects () { // 查询科目
      getMemberSubject(this.id)
      .then(res => {
        let list = res.data.data.examItemName || [];
        this.subjects = list;
        this.fetchGradeList()
      })
      .catch(e => {})
    },
    fetchGradeList () { // 查询成绩记录
      this.loading = true;
      getSubjectGrade({
        memberId: this.id,
        examItemId: this.subjects[this.tabIndex].examItemId,
        startDate: this.dateArea ? (this.dateArea[0] + ' 00:00:00') : null,
        endDate: this.dateArea ? (this.dateArea[1] + ' 23:59:59') : null
      })
      .then(res => {
        this.loading = false;
        let list = res.data.data || [];
        list.forEach(item => {
          item.createDate = formatDate(item.createDate, 'zh:')
        });
        this.gradeList = list
      })
      .catch(e => {
        this.loading = false
      })
    }
  },
  created () {
    let path = this.$route.meta.path;
    this.title = path[path.length - 1];
    this.fetchSubjects()
  }
}
</script>
<style lang="scss">
  .tab-head {
    display: flex;
    background-color: #e4e7ed;
    div {
      padding: 0 20px;
      height: 40px;
      line-height: 40px;
      font-size: 14px;
      color: #909399;
      box-sizing: border-box;
      border: 1px solid transparent;
      cursor: pointer;
      transition: .4s ease;
      &.active {
        background-color: #fff;
        color: #4AC493;
        border-color: #e4e7ed;
      }
    }
  }
  .grade-status {
		border-radius: 4px;
		padding: 8rpx 10rpx;
		font-size: 12px;
		&.excellent { // 优秀
			background-color: #F6FEF9;
			color: #6CE09D;
		}
		&.well { // 良好
			background-color: #F6FAFE;
			color: #61A3E0;
		}
		&.pass { // 及格
			background-color: #FFFAF1;
			color: #FFB436;
		}
		&.fail { // 不及格
			background-color: #FEF6F4;
			color: #F28868;
		}
	}
</style>
